<template>
  <div class="cart">
    <cart-nav-bar class="nav-bar" />
    <scroll class="content" ref="scroll" :pullUpLoad="true">
      <cart-list />
    </scroll>
    <cart-buttom-bar />
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll.vue";
import CartButtomBar from "./childComps/CartButtomBar.vue";
import CartList from "./childComps/CartList.vue";
import CartNavBar from "./childComps/CartNavBar.vue";

export default {
  components: { CartNavBar, CartList, Scroll, CartButtomBar },
  name: "Cart",
  activated() {
    // 当组件处于活跃状态时刷新高度
    this.$refs.scroll.refresh();
  },
};
</script>

<style scoped>
.cart {
  height: 100vh;
}
.content {
  height: calc(100% - 44px - 49px - 40px);
  overflow: hidden;
}
.nav-bar {
  text-align: center;
  background-color: var(--color-tint);
  color: #fff;
  font-size: 16px;
}
</style>
